.overviewGrid {

    h3 {
        margin-bottom: 22px;
        margin-top: 6px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        color: hsl(0deg 0% 20%);
    }

}

.ant-statistic {
    display: flex;
    flex-direction: column-reverse;

    &.status-bar {
        position: relative;
        padding-left: 5px;
        margin-left: 8px;

        :before {
            content: ' ';
            display: block;
            position: absolute;
            top: 6px;
            bottom: 5px;
            width: 4px;
            left: -6px;
            border-radius: 2px;
            background: red;
            margin: 1px;
        }
    }

    &.status-bar.status-red {
        :before {
            background: red;
        }
    }

    &.status-bar.status-yellow {
        :before {
            background: orange;
        }
    }

    &.status-bar.status-green {
        :before {
            background: #3ba26b;
        }
    }

}

.resource-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .resource-link {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .dot {
        // transform: translateY(1px);
        font-size: 20px;
        line-height: 20px;
    }

    .badge-wrapper::before,
    .badge-wrapper::after {
        /* insert an invisible non-breaking space */
        content: "\00a0";
        /* prevent line breaks between the invisible content and the badge */
        white-space: nowrap;
    }

    .badge-new {
        display: inline-flex;
        padding: 2px 8px;
        border-radius: 100px;

        background: hsl(215deg 77% 55%);
        color: white;
        font-size: 10px;
        font-weight: 700;

        margin: 0 8px;
        transform: translateY(-1px);
    }
}
